<template>
    <div>
        <el-row class="row-with-margin">
            <el-col :span="24">
                <div>
                    <el-button type="primary" @click="addPartnerVisible = true">新增</el-button>
                    <el-button @click="batchUpdateStatus1">批量启用</el-button>
                    <el-button @click="batchUpdateStatus0">批量停用</el-button>
                    <el-button>导出</el-button>
                    <el-button>导入</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row class="row-with-margin" style="margin-top: 0px;margin-bottom: 0px;">
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="创建日期">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" v-model="param.betweenTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="公司名称：" label-width="100px">
                        <el-input placeholder="请输入关键词搜索" style="width: 200px; margin-left: 10px;"
                            v-model="param.companyName"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryBtn">查询</el-button>
                        <el-button style="margin-left: 10px;" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 20px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="companyName" label="公司名称"></el-table-column>
                        <el-table-column prop="carrierCode" label="承运商编码"> </el-table-column>
                        <el-table-column prop="carrierType" label="承运商类型"></el-table-column>
                        <el-table-column prop="driverCount" label="司机数量"></el-table-column>
                        <el-table-column prop="vehicleCount" label="车辆数量"></el-table-column>
                        <el-table-column prop="businessLicense" label="公司营业执照"></el-table-column>
                        <el-table-column prop="contracted" label="是否签订合同">
                            <template slot-scope="scope">
                                <span :style="{ color: scope.row.contracted == 1 ? 'green' : 'red' }">
                                    {{ scope.row.contracted == 1 ? '已签约' : '未签约' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                <span :style="{ color: scope.row.status == 1 ? 'green' : 'red' }">
                                    {{ scope.row.status == 1 ? '启用' : '停用' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="updateBtn(scope.row)">编辑</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 0"
                                    @click="updateStatus(scope.row, 1)">停用</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 1"
                                    @click="updateStatus(scope.row, 0)">启用</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :current-page="pageNum"
                    :total="total" layout="total,sizes,prev, pager, next,jumper" @next-click="nextPage"
                    @prev-click="prevPage" @current-change="changePage" @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>



        <!--        //新增弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增商品" :visible.sync="addPartnerVisible">
            <el-form>
                <el-form-item label="公司名称" label-width="100px">
                    <el-input v-model="addPartner.companyName"></el-input>
                </el-form-item>
                <el-form-item label="承运商编码" label-width="100px">
                    <el-input v-model="addPartner.carrierCode"></el-input>
                </el-form-item>
                <el-form-item label="承运商类型" label-width="100px">
                    <el-input v-model="addPartner.carrierType"></el-input>
                </el-form-item>
                <el-form-item label="司机数量" label-width="100px">
                    <el-input v-model="addPartner.driverCount" type="number"></el-input>
                </el-form-item>
                <el-form-item label="车辆数量" label-width="100px">
                    <el-input v-model="addPartner.vehicleCount" type="number"></el-input>
                </el-form-item>
                <el-form-item label="公司营业执照" label-width="100px">
                    <el-input v-model="addPartner.businessLicense"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addPartnerVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPartnerBtn">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //新增弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //修改弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增商品" :visible.sync="updatePartnerVisible">
            <el-form>
                <el-form-item label="公司名称" label-width="100px">
                    <el-input v-model="updatePartner.companyName"></el-input>
                </el-form-item>
                <el-form-item label="承运商编码" label-width="100px">
                    <el-input v-model="updatePartner.carrierCode"></el-input>
                </el-form-item>
                <el-form-item label="承运商类型" label-width="100px">
                    <el-input v-model="updatePartner.carrierType"></el-input>
                </el-form-item>
                <el-form-item label="司机数量" label-width="100px">
                    <el-input v-model="updatePartner.driverCount" type="number"></el-input>
                </el-form-item>
                <el-form-item label="车辆数量" label-width="100px">
                    <el-input v-model="updatePartner.vehicleCount" type="number"></el-input>
                </el-form-item>
                <el-form-item label="公司营业执照" label-width="100px">
                    <el-input v-model="updatePartner.businessLicense"></el-input>
                </el-form-item>

                <el-form-item label="合同状态" label-width="100px">
                    <el-switch v-model="updatePartner.contracted" :active-value="1" :inactive-value="0"
                        active-text="已签约" inactive-text="未签约" active-color="#13ce66"
                        inactive-color="#ff4949"></el-switch>
                </el-form-item>




            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatePartnerVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUpdatePartner">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //修改弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [],//表格对象
            multipleSelection: [],
            param: {},
            addPartnerVisible: false,
            updatePartnerVisible: false,
            addPartner: {},
            updatePartner: {},
        }
    },

    methods: {
        nextPage(val) {//当前页
            //下一页
            this.pageNum = val
            this.queryAllPartner()
        },
        prevPage(val) {//当前页
            //上一页
            this.pageNum = val
            this.queryAllPartner()
        },
        changePage(val) {
            //跳转页
            this.pageNum = val
            this.queryAllPartner()
        },
        sizeChange(val) {
            //改变每页条数
            this.pageNum = 1
            this.pageSize = val
            this.queryAllPartner()
        },
        // ---------------------------------------------分页方法分割线-------------------------------------------------------
        handleSelectionChange(val) {//点击批量删除复选框调用此方法
            this.multipleSelection = val
        },
        queryBtn() {//点击查询按钮调用该方法
            this.pageNum = 1
            this.queryAllPartner()
        },
        resetForm() { //重置按钮调用方法
            this.param = { betweenTime: [], companyName: '' }
            this.queryAllPartner()
        },
        queryAllPartner() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/partner/queryAllPartner', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        addPartnerBtn() {
            this.$axios.post('api/partner/addPartnerBtn', this.addPartner)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.addPartnerVisible = false
                        this.$message({
                            message: '添加成功!!!!',
                            type: 'success'
                        });
                        this.queryAllPartner()
                        this.addPartner = {}
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateBtn(val) {
            this.updatePartner = JSON.parse(JSON.stringify(val));
            this.updatePartnerVisible = true
        },
        saveUpdatePartner() {
            this.$axios.post('api/partner/saveUpdatePartner', this.updatePartner)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.updatePartnerVisible = false
                        this.queryBtn()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateStatus(val, status) {
            const targetStatus = status;

            const message = targetStatus == 0 ? '是否启用该承运商' : '是否停用该承运商';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求

                this.$axios.post('api/partner/updateStatus', val)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            this.$message.success(targetStatus == 0 ? '启用成功' : '停用成功');
                            this.queryBtn();
                        }
                        if (resp.data.code === 500) {
                            this.$message({
                                message: '请签约后再进行启用操作',
                                type: 'error'
                            });
                            
                        }

                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        batchUpdateStatus1(){
            this.$confirm('是否确认要启用选中承运商', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求
                this.$axios.post("/api/partner/batchUpdateStatus1", this.multipleSelection)
                    .then(resp => {
                        console.log(this.multipleSelection);
                        if (resp.data.code === 200) {
                            
                            this.$message({
                                message: '所选承运商启用成功!!!!',
                                type: 'success'
                            });
                            this.queryBtn();
                        }
                        if (resp.data.code === 500) {
                            
                            this.$message({
                                message: '所选承运商中有未签约的承运商,无法启用',
                                type: 'error'
                            });
                        }
                        
                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        batchUpdateStatus0(){
            this.$confirm('是否确认要停用选中承运商', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求
                this.$axios.post("/api/partner/batchUpdateStatus0", this.multipleSelection)
                    .then(resp => {
                        console.log(this.multipleSelection);
                        if (resp.data.code === 200) {
                            
                            this.$message({
                                message: '所选承运商停用成功!!!!',
                                type: 'success'
                            });
                            this.queryBtn();
                        }
                        
                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        }
    },
    created() {
        this.queryAllPartner()
    },

}
</script>

<style scoped>
.row-with-margin {
    margin-bottom: 20px;
    /* 根据需要调整间隙大小 */
}
</style>